<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.school.platform.servlet.InfoDetailServlet.InfoDetail" %>
<%@ page import="com.school.platform.servlet.InfoDetailServlet.Comment" %>
<%@ page import="java.util.List" %>
<%@ page import="java.sql.Timestamp" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>信息详情</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: url('https://picsum.photos/1920/1080') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 40px;
            width: 100%;
            max-width: 800px;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            color: #2c3e50;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

        .info-meta {
            color: #7f8c8d;
            font-size: 16px;
            margin-bottom: 30px;
        }

        .content {
            color: #34495e;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 40px;
        }

        .like-count {
            color: #34495e;
            font-size: 17px;
            margin-bottom: 40px;
        }

        h2 {
            color: #34495e;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .comment-item {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .comment-item:hover {
            transform: translateY(-5px);
        }

        .comment-meta {
            color: #7f8c8d;
            font-size: 15px;
            margin-bottom: 10px;
        }

        form.comment-form,
        form.like-form {
            margin-top: 30px;
        }

        label {
            display: block;
            color: #34495e;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        textarea {
            width: 100%;
            padding: 15px;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            min-height: 120px;
            transition: border-color 0.3s ease;
        }

        textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
        }

        input[type="button"] {
            background-color: #3498db;
            color: white;
            padding: 16px 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            width: 100%;
        }

        input[type="button"]:hover {
            background-color: #2980b9;
        }

        .error {
            color: #e74c3c;
            text-align: center;
            margin: 20px 0;
            font-size: 16px;
        }

        a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        .back-link {
            display: block;
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
        }
    </style>
</head>

<body>
<div class="container">
    <%
        // 从request获取Servlet传递的数据
        InfoDetail infoDetail = (InfoDetail) request.getAttribute("infoDetail");
        List<Comment> commentList = (List<Comment>) request.getAttribute("commentList");
        int likeCount = (Integer) request.getAttribute("likeCount");
    %>

    <!-- 信息标题 -->
    <h1><%= infoDetail.getTitle() %></h1>

    <!-- 发布者和时间 -->
    <div class="info-meta">
        发布者：<%= infoDetail.getUsername() %> | 发布时间：<%=infoDetail.getCreateTime() %>
    </div>

    <!-- 信息内容 -->
    <div class="content">
        <%= infoDetail.getContent() %>
    </div>

    <!-- 点赞数 -->
    <div class="like-count">
        点赞数：<strong id="likeCount"><%= likeCount %></strong>
    </div>

    <!-- 评论列表 -->
    <h2>评论列表</h2>
    <ul id="commentList">
        <% for (Comment comment : commentList) { %>
        <li class="comment-item">
            <div class="comment-meta">
                <%= comment.getUsername() %> 评论于 <%= comment.getCreateTime() %>
            </div>
            <p><%= comment.getContent() %></p>
        </li>
        <% } %>
    </ul>

    <!-- 评论和点赞表单 -->
    <% if (session.getAttribute("username") != null) { %>
    <form class="comment-form">
        <input type="hidden" name="infoId" value="<%= infoDetail.getId() %>">
        <label for="content">写下你的评论：</label>
        <textarea id="content" name="content" required placeholder="请输入评论内容..."></textarea>
        <input type="button" value="发表评论" id="commentBtn">
    </form>

    <form class="like-form">
        <input type="hidden" name="infoId" value="<%= infoDetail.getId() %>">
        <input type="button" value="点赞" id="likeBtn">
    </form>
    <% } else { %>
    <p class="error">请先登录后再进行评论和点赞</p>
    <a href="login.jsp">点击登录</a>
    <% } %>

    <% String error = request.getParameter("error");
        if (error != null) { %>
    <p class="error"><%= error %></p>
    <% } %>

    <a href="infoList.jsp" class="back-link">返回信息列表</a>
</div>

<script>
    $(document).ready(function () {
        // 评论提交
        $('#commentBtn').click(function () {
            var infoId = $("input[name='infoId']").val();
            var content = $('#content').val();////
            $.ajax({
                type: "POST",
                url: "comment",
                data: { infoId: infoId, content: content },
                success: function (response) {
                    if (response === "success") {
                        $('#content').val('');////commentContent
                        // 刷新评论列表
                        $.ajax({
                            type: "GET",
                            url: "infoDetail?infoId=" + infoId,
                            success: function (newPageContent) {
                                var newCommentList = $(newPageContent).find('#commentList').html();
                                $('#commentList').html(newCommentList);
                            }
                        });
                    } else if (response === "not_logged_in") {
                        alert('请先登录再进行评论');
                    } else {
                        alert('评论失败，请重试');
                    }
                },
                error: function () {
                    alert('网络错误，请重试');
                }
            });
        });

        // 点赞提交
        $('#likeBtn').click(function () {
            var infoId = $("input[name='infoId']").val();
            $.ajax({
                type: "POST",
                url: "like",
                data: { infoId: infoId },
                success: function (response) {
                    if (response === "success") {
                        // 刷新点赞数
                        $.ajax({
                            type: "GET",
                            url: "infoDetail?infoId=" + infoId,
                            success: function (newPageContent) {
                                var newLikeCount = $(newPageContent).find('#likeCount').text();
                                $('#likeCount').text(newLikeCount);
                            }
                        });
                    } else if (response === "not_logged_in") {
                        alert('请先登录再进行点赞');
                    } else if (response === "already_liked") {
                        alert('你已经点过赞了');
                    } else {
                        alert('点赞失败，请重试');
                    }
                },
                error: function () {
                    alert('网络错误，请重试');
                }
            });
        });
    });
</script>
</body>

</html>